<template>
  <div id="UserCenterDownload">
    <div class="title">
      <span class="iconfont icon-xiazai"></span>
      我的下载
    </div>
    <div class="download-wrap">
      <div class="search">
        <el-row :gutter="20" type="flex">
          <el-col :span="6">
            <el-input
              placeholder="请输入标题"
              v-model="listQuery.title"
              clearable
            >
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="custom" @click="getList()" plain>搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="msgDataList">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="sysAttachment" label="缩略图" width="100">
            <template slot-scope="scope">
              <div class="img-box">
                <img class="thumbnail" :src="scope.row | fileThumbnail" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fileName"
            label="资源名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="fileName" label="引用" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="scope.row.semesterName">
                {{ scope.row.semesterName }}
                {{ scope.row.gradeName }}
                {{ scope.row.className }}
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="资源大小" width="100">
            <template slot-scope="scope">
              {{ scope.row.fileSize | fileSizeFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="资源类型" width="100">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sysAttachment.attrSuffixStr }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="{ row }">
              <el-button-group>
                <el-button type="success" size="mini" @click="handleLook(row)">
                  预览
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
          <div slot="empty" class="emptyBg">
            <el-empty :image-size="200"></el-empty>
          </div>
        </el-table>
        <Pagination
          v-show="parseInt(pageObj.count) > 0"
          :total="parseInt(pageObj.count)"
          @change="getList"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
        />
      </div>
    </div>
    <Preview />
  </div>
</template>
<script>
import { eduResourceQuoteQuery } from '@/api/admin/teach/eduResourceQuote.js'
import setInfo from '@/mixins/setInfo'
import Bus from '@/utils/bus.js'
export default {
  mixins: [setInfo],
  components: {
    Preview: () => import('@/components/resource/preview.vue'),
  },
  data() {
    return {
      listQuery: {
        title: '',
        page: 1,
        limit: 10,
        createBy: this.$store.getters.userId,
        myDownLoad: 1,
      },
      pageObj: {},
      tableData: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取数据
    getList() {
      eduResourceQuoteQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
      })
    },
    //预览
    handleLook(row) {
      Bus.$emit('showPreview', row)
    },
  },
}
</script>
<style scoped lang="scss">
#UserCenterDownload {
  width: 100%;
  min-height: 500px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  .title {
    color: #333;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    background-color: var(--colorHover1);
    span {
      color: #1d80dc;
      margin-left: 30px;
      margin-right: 10px;
      font-size: 24px;
    }
  }
  .download-wrap {
    padding: 20px 30px;
  }
  .img-box {
    padding: 2px;
    width: auto;
    height: 40px;
    display: inline-block;
    img {
      width: auto;
      height: 100%;
      max-width: 60px;
    }
  }
}
</style>